<script lang="ts" setup>
const {search, currentTitle, setCurrentTitle} = useSearch()

const value = $ref(currentTitle)

// 搜索按钮
function onSearch() {
    setCurrentTitle(value)
    search(value)
}

// 返回按钮
function onClickLeft() {
    uni.navigateBack()
}
</script>

<template>
    <uni-nav-bar :fixed="true" :border="false" :status-bar="true" left-icon="left" left-width="45rpx"
                 right-width="80rpx"
                 background-color="#ffffff" @click-left="onClickLeft">
        <view flex items-center w-full h-full relative m-0 p-0>
            <image src="@/static/images/icons/index/search_top.svg" class="w-16 h-6 top-35 left-25"/>
            <image src="@/static/images/icons/index/search.svg" class="w-32 h-28 left-20"/>
            <input v-model="value" bg="#f6f6f6" placeholder="请输入搜索内容" text="24 #999999"
                   class="h-60 w-full rounded pr-3 pl-8"
                   placeholder-class="input-placeholder" @confirm="onSearch">
        </view>
        <template #left/>
        <template #right>
            <text text="30 #555555 center" w-full @click="onSearch">
                搜索
            </text>
        </template>
    </uni-nav-bar>
</template>

<style lang="scss" scoped>
image {
    position: absolute;
}
</style>
